<template>
  <div class='wrapper'>
    <!--  返回上一级按钮  -->
    <div @click="$router.go(-1)" class="header-abs" v-show="showAbs">
      <span class="iconfont header-abs-back">&#xe624;</span>
    </div>
    <!--  返回首页  -->
    <router-link tag="div" to="/" class="HomePage">
      <span class="iconfont header-abs-back">&#xe617;</span>
    </router-link>
    <!--  顶部隐藏的列表导航  -->
    <div class="header-fixed" v-show="!showAbs" :style="opacityStyle">
      <ul>
        <li>详情</li>
        <li>户型</li>
        <li>周边</li>
        <li>点评</li>
      </ul>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'DetailsTopHeader',
    data () {
      return {
        showAbs: true,
        // 默认 列表导航 透明度为 0，达到某个位置时，会变成1
        opacityStyle: {opacity: 0}
      }
    },
    //方法
    methods: {
      // 让顶部导航，滚动到 XX位置显示出来 ，
      handleScroll () {
        // console.log(document.documentElement.scrollTop)
        // 获取页面滚动 top 值
        const top = document.documentElement.scrollTop
        //  判断 top 值达到 60
        if (top > 60) {

          //  166 / 140  = 1.4....= opacity
          let opacity = top / 140
          // 让opacity 值，如何大于1，则等于1 或 本身
          this.opacity = opacity > 1 ? 1 : opacity
          // opacity 赋值 给 opacity
          this.opacityStyle = {opacity}

          // 让 showAbs  = false
          this.showAbs = false

        } else {
          // 让 showAbs  = true
          this.showAbs = true
        }

      }
    },
    // 当页面即将隐藏.
    activated () {
      // 当页面绑定时，绑定 scroll 事件,  null: 解决报错 没有添加被动事件监听器来阻止'touchstart'事件，请考虑添加事件管理者'passive'，以使页面更加流畅。
      window.addEventListener('scroll', this.handleScroll)
    },
    // 当页面即将隐藏或替换成新页面的时候
    deactivated () {
      // 当页面退订时，解绑 scroll 事件, null: 解决报错 没有添加被动事件监听器来阻止'touchstart'事件，请考虑添加事件管理者'passive'，以使页面更加流畅。
      window.removeEventListener('scroll', this.handleScroll)
    }
  }
</script>

<style scoped lang="stylus">
  @import "~styles/varibles.styl"

  .header-abs
    position absolute
    top .2rem
    left .2rem
    width .6rem
    height .6rem
    /*background pink*/
    display flex
    justify-content center
    align-items center
    z-index 1

  .header-fixed
    background $bgColor
    position fixed
    top 0
    left 0
    right 0
    font-size .3rem
    line-height $headerHeight
    z-index 2

  .header-fixed ul
    display flex
    justify-content space-around
    align-items center


  .header-fixed ul li
    line-height $headerHeight
    color white

  .header-abs-back
    color white

  .HomePage
    position absolute
    top .2rem
    right .2rem
    width .6rem
    height .6rem
    /*background pink*/
    display flex
    justify-content center
    align-items center
    z-index 1

  .HomePage span
    font-size .4rem
</style>
